<template>
  <div class="collect">
    <ul id="order_ul">
      <li v-for="(v,k) in collect.slice((currentPage-1)*3,(currentPage)*3)" :key="k">
        <el-row style="height:160px;">
          <el-col id="collect_img" :md="8" :lg="8">
            <img :src="getcollectimg(v.carPic1)" alt width="150px" />
          </el-col>
          <el-col id="collect_text" :md="12" :lg="12">
            <ul>
              <li>
                <h3>{{v.carName}}</h3>
              </li>
              <li>
                <span>品牌：</span>
                <span>{{v.brand}}</span>
              </li>
              <li>
                <span>排量：</span>
                <span>{{v.displacement}}</span>
              </li>
            </ul>
          </el-col>
          <el-col id="collect_right" :md="4" :lg="4">
            <h2>￥{{v.price}}</h2>

            <span id="collect-btn" class="btn btn-primary" @click="carId=v.carId,Cancle()">取消收藏</span>
          </el-col>
        </el-row>
      </li>
      <!-- 分页 -->
      <el-pagination
        background
        :page-size="3"
        :pager-count="5"
        :hide-on-single-page="true"
        layout="prev, pager, next"
        :total="allorders"
        @current-change="allorderpageChange"
        :current-page.sync="currentPage"
        style="text-align:center"
      ></el-pagination>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      collect: [],
      currentUser: {},
      collectId: ""
    };
  },
  created() {
    this.$axios
      .post("http://localhost:3000/personal/ShowCollect")
      .then(res => {
        console.log("收藏汽车：", res.data.data);
        this.collect = res.data.data;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
  },
  inject: ["reload"],
  methods: {
    Cancle() {
      this.$axios
        .post("http://localhost:3000/cardetail/CanFavourite", {
          carId: this.carId
        })
        .then(res => {
          console.log("取消收藏：", res.data.data);
          this.reload();
          // this.collect = res.data.data;
        })
        .catch(err => {
          console.log("错误信息：", err);
        });
    },

    getcollectimg(carimg) {
      let path = "http://localhost:3000/upload/" + carimg;
      return path;
    }
  }
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}

.collect {
  flex: 2;
}

ul {
  list-style: none;
}

#collectbody {
  background-color: #eee;
  height: 500px;
}

#collectbody_ul > li {
  height: 150px;
  background-color: #fff;
  margin-bottom: 20px;
  display: flex;
}

#collect-img {
  flex: 2;
  margin: 10px;
}

#collect-text {
  flex: 5;
  margin: 10px;
  display: flex;
}

#collect-text > ul > li {
  margin: 15px;
  margin-top: 5px;
}

#collect-text li h3 {
  display: inline-block;
  margin-top: 0px;
}

#collect-right {
  flex: 2;
  position: relative;
}

#collect-right h2 {
  color: orange;
  display: inline-block;
}

#collect-btn {
  position: relative;
  bottom: -10px;
}
#collect_img {
  text-align: center;
  /* padding-top:35px; */
}
</style>
